<template>
    <div>
        <div class="container" v-if="wrapSwitchStatus === 2">
            <div class="banner">
                <img :src="bannerImg" lazy-load>
            </div>
            <div class="nav">
                <span @click="courseFlage = false; courseCheckIndex = null">课程介绍</span>
                <span @click="courseFlage = true; courseCheckIndex = null ">可选内容</span>
                <div :class="{active:courseFlage == true }"></div>
            </div>
            <div class="description">
                <div class="course-desc-img" v-if="!courseFlage">
                    <img :src="course_description" lazy-load  mode="widthFix">
                </div>
                <div class="course-list" v-if="courseFlage">
                    <!-- :style="{'background-image' : 'url('+item.type_banner+')'}" -->
                    <div v-for="(item,index) in courseList" v-if="item.batch_state != 2" :key="index" :class="{active: courseCheckIndex === index}"  @click="courseCheckIndex = index">
                        <img :src="item.batch_image != null ? item.batch_image : item.type_referral">
                        <div class="apply-num">
                            <div v-if="(item.max_sum - item.apply_sum) >= 0">
                                <span>剩余</span>
                                <span class="num">{{item.max_sum - item.apply_sum}}</span>
                                <span>人</span>
                            </div>
                            <div v-else>已报满</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fixed-tab">
                <div class="tab-item" @click.stop="qrCodeShow = true">
                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/contact_customer_service@2x.png" alt="悦器社">
                </div>
                <div class="tab-item" @click="joninCourse()">
                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/join_now@2x.png" alt="悦器社">
                </div>
            </div>
            <!-- <div class="footer">
                <div class="service"  @click.stop="qrCodeShow = true">
                    <span class="item"><img src="http://mobuz-mp.gz.bcebos.com/matter/contact_customer_service.png" mode="widthFix">联系客服</span>
                </div>
                <div class="text">快来加入学习吧！</div>
                <div class="join-btn" @click="joninCourse()">
                    <span>立即加入</span>
                </div>
            </div>  -->
        </div>
        
        <div class="music-score" v-if="wrapSwitchStatus === 1">
            <featuredTask></featuredTask>
        </div>
        <div class="music-score" v-if="wrapSwitchStatus === 3">
            <musicScore></musicScore>
        </div>

        <div class="footer-tab">
            <div class="item" @click="wrapSwitchStatus = 1">
                <div class="item-icon">
                    <img v-if="wrapSwitchStatus !== 1" src="https://mobuz-mp.cdn.bcebos.com/matter/select_the_homework_not_selected@2x.png" alt="悦器社">
                    <img v-if="wrapSwitchStatus === 1" src="https://mobuz-mp.cdn.bcebos.com/matter/select_the_homework_selected@2x.png" alt="悦器社">
                </div>
                <div class="item-name" :class="{active: wrapSwitchStatus === 1}">精选作业</div>
            </div>
            <div class="item" @click="wrapSwitchStatus = 2">
                <div class="item-icon">
                    <img v-if="wrapSwitchStatus !== 2" src="http://mobuz-mp.cdn.bcebos.com/matter/course_description_not_selected@2x.png" alt="悦器社">
                    <img v-if="wrapSwitchStatus === 2" src="http://mobuz-mp.cdn.bcebos.com/matter/course_description_selected@2x.png" alt="悦器社">
                </div>
                <div class="item-name" :class="{active:wrapSwitchStatus === 2}">课程介绍</div>
            </div>
            <div class="item" @click="wrapSwitchStatus = 3">
                <div class="item-icon">
                    <img v-if="wrapSwitchStatus !== 3"  src="http://mobuz-mp.cdn.bcebos.com/matter/music_score_not_selected@2x.png" alt="悦器社">
                    <img v-if="wrapSwitchStatus === 3" src="http://mobuz-mp.cdn.bcebos.com/matter/music_score_selected@2x.png" alt="悦器社">
                </div>
                <div class="item-name" :class="{active: wrapSwitchStatus === 3}">曲谱库</div>
            </div>
        </div>
        <div class="qr_code" v-if="qrCodeShow">
            <div class="mask" @click.stop="qrCodeShow = false"></div>
            <div class="code">
                <span @click.stop="qrCodeShow = false">
                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/share_mp_close_ btn.png">
                </span>
                <p>点击图片保存到本地</p>
                <p>添加客服</p>
                <div class="img" @click="showContentImage(qrCodeImg)">
                    <img :src="qrCodeImg">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getReferral,obtainCourseApply  } from "@/config/api";
import { accreditFlag , showMessager , showPictureCard} from "@/config/wUtils";
import musicScore from '../musicScore/index.vue';  
import featuredTask from '../featuredTask/index.vue';  
export default {
    data() {
        return {
            // 用户信息
            userInfo: {},
            // banner
            bannerImg: "",
            // 课程介绍
            course_description: "",
            // 课程列表
            courseList: [],
            // 是否选择课程
            courseFlage: false,
            // 选择了
            courseCheckIndex: null,
            // 是否授权过
            accredit: false,
            // 显示客服二维码
            qrCodeShow: false,
            qrCodeImg: 'http://mobuz-mp.gz.bcebos.com/matter/service_qr_code.jpg',
            //  页面切换
            wrapSwitchStatus: 2
        };
    },
    components:{
        musicScore,
        featuredTask
    },
    async mounted() {
        // 判断用户是否授权过
        // await this.getUserData();
        // 本地用户信息
        this.userInfo = await wx.getStorageSync("userInfo");
        console.log(this.userInfo, "信息");
        // 首页数据
        await this.obtainIndexInfo();
    },
    // 下拉刷新
    onPullDownRefresh() {
        let self = this;
        // 获取 今日课程 数据
        self.obtainIndexInfo();
    },
    methods: {
        async obtainIndexInfo() {
            console.log(this.userInfo, '...........this.userInfo')
            await getReferral(this.userInfo.openId, this.userInfo.unionId)
                .then(res => {
                    console.log("获取banner", res);
                    if (res.data) {
                        // banner
                        this.bannerImg = res.data.banner_img;
                        // 课程介绍 图片
                        this.course_description = res.data.course_description;
                        // 课程列表
                        this.courseList = res.data.course_List;
                    }
                })
                .catch(err => {});
            wx.stopPullDownRefresh()    
        },
        // 报名课程
        async joninCourse () {
            // 没有选择课程内容
            if (this.courseCheckIndex == null) {
                // showMessager('请选择内容~')
                this.courseFlage = true;
                return false;
            }
            // 选中的的课程
            let course = this.courseList[this.courseCheckIndex];  
            // 已报满
            if (course.max_sum <= course.apply_sum) {
                showMessager('当前课程已报满');
                return false;
            }
            // 报名截止
            // 一天的时间戳
            let day = 60 * 60 * 24 * 1000;
            let now = new Date().getTime()
            let end  = (course.end_time-0) + day; // 比如今天23号，到23号晚上12点之前，都可以报名
            if (end < now) {
                showMessager('当前课程已截止报名')
                return false;
            };
            // 跳转支付界面
            let batch_id = course.batch_id;
            let type_id = course.type_id;

            // 获取报名情况
            await obtainCourseApply(batch_id, this.userInfo.openId, this.userInfo.unionId)
                .then( res => {
                    console.log(res,'报名人数')
                    if (res.status === 200) {
                        wx.navigateTo({
                            url: '../coursePayment/main?batch_id='+batch_id+'&type_id='+type_id
                        })
                    } else {
                        showMessager(res.msg)
                        this.obtainIndexInfo();
                    }
                })
                .catch( err => {
                    showMessager('前方堵塞，服务器繁忙')
                })
       
        },
        // 展示 图片
        showContentImage(itemImage) {
            let self = this;
            const imageList = []
            imageList.push(itemImage)
            showPictureCard(itemImage, imageList)
        }
    }
};
</script>
<style>
page {
    height: 100%;
    background-color: #fafafa;
}
</style>
<style lang="less" scoped>
.container {
    padding-bottom: 98rpx;
    .banner {
        width: 100%;
        height: 350rpx;
        img {
            width: 100%;
            height: 350rpx;
        }
    }
    .nav {
        font-size: 0;
        background-color: #fafafa;
        position: relative;
        height: 68rpx;
        width: 100%;
        > div {
            position: absolute;
            width: 50%;
            left: 0;
            transition: all 0.3s;
            &.active {
                transform:translate(100%)
            }
            &::before {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 14rpx;
                width: 40rpx;
                height: 4rpx;
                margin-left: -20rpx;
                background-color: #ee3a29;
                border-radius: 4rpx;
                -webkit-border-radius: 4rpx;
                box-sizing: border-box;
            } 
        }
        span {
            font-family: PingFangSC-Regular;
            padding: 14rpx 0 21rpx;
            display: inline-block;
            width: 50%;
            font-size: 28rpx;
            color: #333333;
            letter-spacing: 0.7rpx;
            text-align: center;
            cursor: pointer;
            position: relative;
            z-index: 99;
        }
    }
    .description {
        background-color: #fafafa;
        padding: 0 24rpx;
        .course-desc-img {
            width: 100%;
            height: auto;
            img {
                width: 100%;
                height: auto;
                vertical-align: top;
            }
        }
        .course-list {
            padding: 0 8rpx;
            > div {
                margin-bottom: 20rpx;
                width: 100%;
                height: 265rpx;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 100%;
                border-radius: 10rpx;
                overflow: hidden;
                position: relative;
                transition: all 0.3s;
                border: 2rpx solid transparent;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
                &.active {
                    border: 3rpx solid #ee3a29;
                    box-shadow: 0 0 12rpx 2rpx rgba(223, 223, 223, 0.5);
                    box-sizing: border-box;
                    background-size: 105%;
                }
                .apply-num {
                    position: absolute;
                    bottom: 15rpx;
                    right: 12rpx;
                    width: 170rpx;
                    height: 38rpx;
                    background: rgba(51,51,51,0.40);
                    border-radius: 10rpx;
                    > div {
                        font-size: 0;
                        text-align: center;
                        span {
                            display: inline-block;
                            font-family: PingFangSC-Light;
                            font-size: 26rpx;
                            color: #FFFFFF;
                            line-height: 38rpx;
                            letter-spacing: 0.57rpx;
                        }
                        span.num {
                            padding: 0 12rpx;
                            display: inline-block;
                            font-family: DINCondensed-Bold;
                            font-size: 28rpx;
                            color: #ee3a29;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 98rpx;
        background: #ffffff;
        box-shadow: 0 -1rpx 10rpx 0 #eeeeee;
        font-size: 0;

        > div {
            vertical-align: middle;
        }
        .service {
            margin-left: 24rpx;
            width: 155rpx;
            height: 100%;
            position: relative;
            z-index: 99;
            button {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                z-index: 99;
                background-color: transparent;
                border: none;
                border-color: transparent;
                outline: 0;
                &::after {
                    border: 0;
                }
            }
            > span {
                display: inline-block;
            }
            span.item {
                font-family: PingFangSC-Light;
                line-height: 98rpx;
                display: table-cell;
                font-size: 26rpx;
                color: #333333;
                letter-spacing: 0.57rpx;
                img {
                    margin-top: -2rpx;
                    margin-right: 8rpx;
                    display: inline-block;
                    // line-height: 98rpx;
                    vertical-align: middle;
                    width: 33rpx;
                }
            }
        }
        .text {
            font-family: PingFangSC-Light;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 26rpx;
            color: #333333;
            letter-spacing: 0.57rpx;
            line-height: 98rpx;
        }
        .join-btn {
            position: absolute;
            top: 0;
            right: 24rpx;
            top: 50%;
            width: 220rpx;
            height: 60rpx;
            margin-top: -30rpx;
            span,
            button {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            span {
                background-image: linear-gradient(
                    -90deg,
                    #feb692 0%,
                    #f77879 100%
                );
                font-family: PingFangSC-Regular;
                border-radius: 30rpx;
                font-size: 28rpx;
                color: #ffffff;
                letter-spacing: 0.7rpx;
                text-align: center;
                line-height: 60rpx;
            }
            button {
                background-color: transparent;
                z-index: 99;
                &::after {
                    border: 0;
                }
            }
        }
    }
    .fixed-tab {
        position: fixed;
        right: 32rpx;
        bottom: 130rpx;
        width: 82rpx;
        > .tab-item {
            display: block;
            border-radius: 50%;
            img {
                vertical-align: top;
                display: block;
                width: 82rpx;
                height: 82rpx;
            }
            &:last-child {
                margin-top: 20rpx;
            }
        }
    }
}
.footer-tab {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 98rpx;
    background: #FFFFFF;
    box-shadow: 0 -1px 10px 0 #EEEEEE;
    font-size: 0;
    > .item {
        display: inline-block;
        width: 33.333%;
        text-align: center;
        > .item-name {
            font-family: PingFangSC-Regular;
            font-size: 20rpx;
            letter-spacing: 0.55rpx;
            color: #666666;
            &.active {
                color: #EE3A29;
            }
        }
        > .item-icon {
            margin: 11rpx auto 0;
            display: block;
            width: 56rpx;
            height: 56rpx;
            background-color: #fff;
            img {
                display: block;
                vertical-align: middle;
                // width: 100%;
                width: 56rpx;
                height: 54rpx;
            }
        }
    }
}
.music-score {
    padding-bottom: 98rpx;
}
.qr_code {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99;
    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.70);
    }
    .code {
        position: absolute;
        left: 50%;
        bottom: 118rpx;
        margin-left: -300rpx;
        margin-top: -390rpx;
        width: 600rpx;
        height: 740rpx;
        background-color: #fff;
        border-radius: 10rpx;
        p {
            font-family: PingFangSC-Medium;
            font-size: 36rpx;
            color: #333333;
            text-align: center;
            line-height: 50rpx;
        }
        p:nth-of-type(1) {
            padding-top: 123rpx;
        }
        p:nth-of-type(2) {
            padding-bottom: 7rpx;
        }
        span {
            position: absolute;
            top: 28rpx;
            right: 28rpx;
            width: 32rpx;
            height: 32rpx;
            display: block;
            img {
                display: block;
                width: 32rpx;
                height: 32rpx;
            }
        }
        div {
            text-align: center;
            img {
                margin: 0 auto;
                display: block;
                width: 430rpx;
                height: 430rpx;
            }
        }
    }
}
</style>
